webui开发环境性能优化

目前webui开发环境使用的是vite3，由于项目代码数量极多，开发环境已经越来越卡顿，刷新通常需要30s（电脑刚重启且只跑webui项目）~60s（开了很多东西且几天没重启了），vite配置变更的重跑甚至需要8~10min，已严重影响了开发效率。

升级vite4

首先要做的就是把vite及相关包升级到最新版本

{
    "dependencies": {
        "vue": "^3.3.4",
    },
    "devDependencies": {
        "@rollup/plugin-yaml": "^4.1.1",
        "@vitejs/plugin-basic-ssl": "^1.0.1",
        "@vitejs/plugin-vue": "^4.2.3",
        "@vitejs/plugin-vue-jsx": "^3.0.1",
        "unplugin-vue-components": "^0.25.1",
        "vite": "^4.4.9",
    	"vite-plugin-http2-proxy": "^0.4.1",
    	"vite-tsconfig-paths": "^4.2.0",
    }
}

将vite升级后会提示需要更新的包，照着升级即可。

报错

热更新时，碰上keep-alive的组件会报错，排查后发现是vue的问题，升级新版即可解决

优化vite配置

由于vite本地模式是通过esmodule加载文件，这样会产生加载很多个文件的问题。所以vite提供了优化项：optimizeDeps，配置了的包会被vite进行预构建，比如lodash，不打包的话会产生600+请求，打包后就只有一个了，能大大节省加载时间

示例如下：

{
    optimizeDeps: {
      include: [
          '@idux/components/xxx',
          '@idux/cdk/xxx',
          '@idux/pro/xxx',
          '@uedc/ixs-components/xxx',
          'date-fns',
          '@uedc/ixs-charts',
          '@uedc/ixs-flow',
          '@uedc/ixs-utils',
          '@uedc/ixs-pro/xxx',
          'dayjs',
          'echarts',
          'echarts/core',
          'echarts/charts',
          'echarts/components',
          'echarts/renderers',
          'lodash-es',
          'pinia',
          'qs',
          'vue',
          'vue-router',
          'vue-types',
          '@antv/x6',
      ]
}

主要是将会产生多个文件的包进行优化。

特殊情况

date-fns

date-fns这个包是@uedc/ixs-components中用到的，但是ixs并没有打包，webui项目中也没用到date-fns，所以导致配置了优化项也不生效。

这里通过在webui中安装date-fns包解决，由于项目中并没有引用该包，所以并不会增加包体积。

echarts

echarts需要加上子项，不然优化不到

'echarts/core',
'echarts/charts',
'echarts/components',
'echarts/renderers',

antv-x6

之前在vite3中，添加到优化项会导致报错，现在意外发现不会报错了

优化后效果

首次加载：从8.3min 降低至 2.2min，性能提升377%。

刷新：从29s降低至10s，性能提升290%。

通过以上优化，大大减少了开发环境的更新时间，又可以愉快的写代码了。

未完成项

由于webui是个老项目，项目中存在大量ext的组件代码，在非ext的页面也会存在787个需要加载的ext文件，如果能优化了，肯定又能节省几秒钟。

针对vite优化项的思路，给src/ext2vue/entry文件夹加上package.json，假装其是一个外部包，

然后在vite优化项中加入该包名，

同时在项目的package.json中写上该包名"ext-entry": "link:src/ext2vue/entry"并pnpm i

理论上没问题，但是会报找不到文件，vite在这里不认识配置alias，暂未找到解决办法。